<template>
	<div>
		<div class="intop">
			<img src="../../assets/img1/640x284_dl_20170626.jpg"/>
		</div>
		<div class="booklist">
			<ul>
			   <li v-for="item in dataList">{{item.name}}</li>
			</ul>
		</div>
	    <div class="paper">
	        <span class="prevent">限时抢</span>
		    <span class="font">巴拉巴拉满200减120</span>
		    <span class="jianjiaohao">></span>
	    </div>
	    <div class="gray"></div>
	    <div id="">
	    	<img class="midimg" src="../../assets/img1/620x150_lyx_0623.jpg"/>
	    </div>
	    <div id="bigbook">
	    	<div id="booktitle">
	    		<span class="midl">图书·电子书·网络文学</span><span class="midr">更多  <span class="midm">></span></span>
	    	</div>
	    <div id="big">
	    	
	   
	    	<div class="cenl">
	    		<img src="../../assets/img1/Android-new_01-6.26.jpg"/>
	    	</div>
	    	<div id="">
	    		<div class="cenrt">
	    		<img src="../../assets/img1/Android-new_05-6.20.jpg"/>
	    	</div>
	    	<div class="cenrb">
	    		<img src="../../assets/img1/Android-new_06-6.26.jpg"/>
	    	</div>
	    	</div>
	   
	    	
	   
	    <div class="cl">
	    	<img src="../../assets/img1/Android-new_02-6.26.jpg"/>
	    </div>
	    <div class="cr">
	    	<img src="../../assets/img1/Android-new_07-6.26.jpg"/>
	    
	     </div>
	    <div class="fourbook">
	    	<img src="../../assets/img1/Android-new_03-6.26.jpg"/>
	    	<img src="../../assets/img1/Android-new_04-6.26.jpg"/>
	    	<img src="../../assets/img1/Android-new_08-6.26.jpg"/>
	    	<img src="../../assets/img1/Android-new_09-0626.jpg"/>
	    </div>
	     </div>
	    </div>
	    <div class="gray"></div>
	      <div id="bigbook">
	    	<div id="booktitle">
	    		<span class="midl">图书·电子书·网络文学</span><span class="midr">更多  <span class="midm">></span></span>
	    	</div>
	    <div id="big">
	    	
	   
	    	<div class="cenl">
	    		<img src="../../assets/img1/3C-iso-K1-6.26.jpg"/>
	    	</div>
	    	<div id="">
	    		<div class="cenrt">
	    		<img src="../../assets/img1/apple-and-0510.jpg"/>
	    	</div>
	    	<div class="cenrb">
	    		<img src="../../assets/img1/350-193-an-170511-zw.jpg"/>
	    	</div>
	    	</div>
	   
	    	
	   
	    <div class="cl">
	    	<img src="../../assets/img1/jiadian-and-0420.jpg"/>
	    </div>
	    <div class="cr">
	    	<img src="../../assets/img1/350-193-0620.jpg"/>
	    
	     </div>
	    <div class="fourbook">
	    	<img src="../../assets/img1/and-bang-0502.jpg"/>
	    	<img src="../../assets/img1/and-3-6-22.jpg"/>
	    	<img src="../../assets/img1/174-236-20170609.jpg"/>
	    	<img src="../../assets/img1/174-236bj.jpg"/>
	    </div>
	     </div>
	    </div>
	     <div class="gray1">为你推荐</div>
	     <div class="manybooks">
	     	<div class="singlebook"  v-for="i in dataLista">
	     		<img class="slbimg" :src="i.img" alt="暂无此图"/>
	     		<span id="slbspan">{{i.title}}</span>
	     		<div>￥19.9</div>
	     	</div>
	     </div>
	</div>
</template>

<script>
	
	export default {
		data(){
			return {
				dataList: [],
				dataLista:[]
			}
		},
		methods:{
			request(){
				this.$http({
					url: '/static/first.json',
					params: {
						
					},
					method: 'GET'
				}).then(function(req){
					// console.log(req);
					//var result = JSON.parse(req.body);
					//this.dataList = result.data;
					
					this.dataList = req.body.data;
				});
				this.$http({
					url: 'http://localhost:8080/request',
					params: {
						
					},
					method: 'GET'
				}).then(function(req){
					// console.log(req);
					//var result = JSON.parse(req.body);
					//this.dataList = result.data;
					console.log(req)
					this.dataLista = req.body.result.data;
				});
			}
		},
		mounted(){
			this.request();
		},
	}
	
	
	

</script>

<style>
    .intop img{
    	width: 10rem;
    	height: auto;
    }
    .booklist{
    	width: 10rem;
    	height: 3.59375rem;
    }
    .booklist ul{
    	display: flex;
    	justify-content: space-around;
    	flex-wrap: wrap;
    	list-style: none;
    	/*margin-top: 0.15625rem;*/
    }
    .booklist ul li {
    	border-right: solid 0.015625rem lightgray;
    	width:1.8rem;
    	height:0.8rem;
    	text-align: center;
    }
    
    /*.booklist ul li:last-child{
    	border-style: none;
    }*/
    .paper{
			width: 7.34375rem;
			height: 0.828125rem;
			background-image: url(../../assets/img1/quicknews.png);
			background-repeat: no-repeat;
			background-size: 2.34375rem 0.859375rem;
			padding-left: 2.65625rem;
			padding-top: 0.171875rem;
		}
		.paper .prevent{
			display: inline-block;
			width: 1rem;
			height: 0.453125rem;
			color: red;
			border: red;
			border:solid 0.046875rem red;
			border-radius: 0.0625rem;
			text-align: center;
			font-weight: bold;
		}
		.font{
			font-size:0.359375rem;
			margin-left: 0.15625rem;
		}
	.jianjiaohao{
		margin-left: 1.8rem;
	}
	.gray{
			width: 10rem;
			height: 0.3125rem;
			background-color: #f5f1f3;
		}
	.midimg{
		width: 10rem;
		height: 2.34375rem;
	}
	
	#booktitle{
		width: 10rem;
		display: flex;
		justify-content: space-between;
		font-size: 0.375rem;
		font-weight: bold;
		vertical-align: middle;
		border-bottom: solid 0.015625rem lightgray;
		height: 0.703125rem;
	}
	
	.midl{
		margin-left: 0.46875rem;
	}
	.midr{
		margin-right: 0.46875rem;
		color: #fc515d;
	}
	.midm{
		background-color: #fc515d;
		display: inline-block;
		width: 0.625rem;
		height: 0.625rem;
		text-align: center;
		color: white;
		font-weight: bold;
	}
	#big{
		display: flex;
		flex-wrap: wrap;
	}
	
	.cenl img{
		width: 4.98rem;
		height: 6.03125rem;
	}
	.cenl{
		border-right: solid 0.015625rem lightgray;
	}
	.cenrt img{
		width: 5rem;
		height: 2.98rem;
	}
	.cenrt{
		border-bottom: solid 0.015625rem lightgray;
	}
	.cenrb img{
		width: 5rem;
		height: 3.03125rem;
	}
	.cl img{
		width: 5rem;
		height: 3rem;
	}
	.cr img{
		width: 5rem;
		height: 3rem;
	}
	.fourbook{
		display: flex;
		justify-content: space-around;
	}
	.fourbook img{
		width:2.5rem;
		height: auto;
	}
	.gray1{
			width: 10rem;
			height: 0.625rem;
			background-color: #f5f1f3;
			background-image: url(../../assets/img1/yes.png);
			background-repeat: no-repeat;
			background-position: 3rem 0;
			text-align: center;
			font-size: 0.40625rem;
		}
		
	.singlebook{
		width: 5rem;
		height: 8rem;
	}
	.slbimg{
		width: 5rem;
		height: 6rem;
	}
	#slbspan{
		width: 5rem;
		text-align: center;
		font-size: 0.46875rem;
		font-weight: bold;
	}
	.manybooks{
		width: 10rem;
		display: flex;
		flex-wrap: wrap;
		height: auto;
	}
	.singlebook div{
		font-size: 0.4375rem;
		color: red;
		font-weight: bold;
	}
	header{
		display: flex;
	}
</style>